<template>
  <div
    v-loading="pageLoading"
    element-loading-text="加载中..."
    class="pan-share-content"
  >
    <div class="pan-share-header-content">
      <div class="pan-share-header-content-wrapper">
        <div class="pan-share-header-title-font-content">
          <span class="pan-share-header-title-font" @click="goHome"
            ><img src="@/assets/imgs/logo.svg" alt="" />{{ title }}</span
          >
        </div>
        <div v-if="loginFlag" class="pan-share-header-user-info-content">
          <pan-user-info position="bottom" />
        </div>
        <div v-if="!loginFlag" class="pan-share-header-button-content">
          <el-link
            :underline="false"
            type="primary"
            class="pan-share-login-button"
            @click="login"
          >
            登录
          </el-link>
        </div>
      </div>
    </div>
    <div class="pan-share-list-content">
      <div class="pan-share-list-wrapper">
        <el-card shadow="always" class="pan-share-list-card">
          <div
            v-if="!shareCancelFlag"
            slot="header"
            class="pan-share-list-card-header"
          >
            <div class="pan-share-list-card-header-share-info-content">
              <span class="pan-share-list-card-header-share-info">{{
                shareCodeHeader
              }}</span>
              <div class="pan-share-list-card-header-time">
                <span class="pan-share-list-card-header-create-date"
                  ><i class="el-icon-time" />分享时间：{{ shareDate }}</span
                >
                <span class="pan-share-list-card-header-expire-date"
                  ><i class="el-icon-time" />失效时间：{{
                    shareExpireDate
                  }}</span
                >
              </div>
            </div>
            <div class="pan-share-list-card-button-group">
              <el-button
                type="success"
                size="medium"
                round
                @click="saveFiles(undefined)"
                >保存到我的R盘<i class="el-icon-document-copy el-icon--right"
              /></el-button>
              <el-button type="info" size="medium" round @click="downloadFile"
                >下载<i class="el-icon-download el-icon--right"
              /></el-button>
            </div>
          </div>
          <!-- <div v-if="shareCancelFlag" class="pan-share-list-card-error-message">
            <span>Sorry,您来晚啦~ 该分享已到期或已失效~</span>
          </div> -->
          <div class="empty" v-if="shareCancelFlag">
            <div>
              <div class="icon">
                <i class="iconfont icon-empty1"></i>
              </div>
              <div class="title">Sorry,您来晚啦~ 该分享已到期或已失效~</div>
            </div>
          </div>
          <!-- <div
            v-if="!shareCancelFlag"
            class="pan-share-list-card-operate-content"
          >
            <div class="pan-share-list-card-operate-bread-crumb">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item
                  v-for="(item, index) in breadCrumbs"
                  :key="index"
                >
                  <a
                    class="breadcrumb-item-a"
                    @click="goToThis(item.id)"
                    href="#"
                    >{{ item.name }}</a
                  >
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <el-divider></el-divider>
          </div> -->
          <div v-if="!shareCancelFlag" class="pan-share-list">
            <div :class="'file-list1 table'" v-if="tableData.length > 0">
              <div class="item">
                <div :class="'file-item'">
                  <div class="check">
                    <el-checkbox v-model="checkAll"></el-checkbox>
                  </div>

                  <div class="name">分享名称</div>
                  <div class="action"></div>
                  <div class="size">大小</div>
                  <div class="time">修改日期</div>
                </div>
              </div>
            </div>
            <el-scrollbar
              class="scrollbar"
              style="height: calc(100vh - 45px - 63px)"
              v-if="tableData.length > 0"
            >
              <div :class="'file-list table'">
                <div
                  class="item"
                  v-for="(item, index) in tableData"
                  :key="item.shareId"
                  :data-id="index"
                  @click.exact.stop="selectItem(item)"
                >
                  <div :class="'file-item item' + index">
                    <div class="check">
                      <el-checkbox
                        :value="getListIndex(item) >= 0"
                      ></el-checkbox>
                    </div>
                    <div class="icon">
                      <svg class="svgicon" aria-hidden="true">
                        <use
                          :xlink:href="
                            '#icon-' + getFileFontElement(item.fileType)
                          "
                        ></use>
                      </svg>
                    </div>
                    <div class="name">
                      {{ item.filename }}
                    </div>
                    <div class="action">
                      <el-tooltip
                        class="item"
                        effect="light"
                        content="保存到我的R盘"
                        placement="top"
                      >
                        <el-button
                          type="success"
                          size="small"
                          circle
                          @click="saveFiles(item)"
                        >
                          <i class="el-icon-document-copy" />
                        </el-button>
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="light"
                        content="下载"
                        placement="top"
                      >
                        <el-button
                          type="danger"
                          size="small"
                          circle
                          @click="doDownload(item)"
                        >
                          <i class="el-icon-download" />
                        </el-button>
                      </el-tooltip>
                    </div>
                    <div class="size">
                      {{ item.fileSizeDesc }}
                    </div>
                    <div class="time">
                      {{ item.updateTime }}
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="欢迎登录"
      :visible.sync="loginDialogVisible"
      @opened="focusInput('username')"
      @closed="resetForm('loginForm')"
      width="30%"
      :append-to-body="true"
      :modal-append-to-body="false"
      :center="true"
    >
      <div>
        <el-form
          label-width="100px"
          :rules="loginRules"
          ref="loginForm"
          :model="loginForm"
          status-icon
          @submit.native.prevent
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              ref="username"
              @keyup.enter.native="doLogin"
              v-model="loginForm.username"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              show-password
              @keyup.enter.native="doLogin"
              v-model="loginForm.password"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doLogin" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="shareCodeDialogVisible"
      @opened="focusInput('shareCode')"
      @closed="resetForm('shareCodeForm')"
      width="30%"
      :fullscreen="true"
      :append-to-body="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <svg
        class="svg"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid slice"
      >
        <defs>
          <radialGradient
            id="Gradient1"
            cx="50%"
            cy="50%"
            fx="10%"
            fy="50%"
            r=".5"
          >
            <animate
              attributeName="fx"
              dur="34s"
              values="0%;3%;0%"
              repeatCount="indefinite"
            />
            <stop offset="0%" stop-color="#ff0" />
            <stop offset="100%" stop-color="#ff00" />
          </radialGradient>
          <radialGradient
            id="Gradient2"
            cx="50%"
            cy="50%"
            fx="10%"
            fy="50%"
            r=".5"
          >
            <animate
              attributeName="fx"
              dur="23.5s"
              values="0%;3%;0%"
              repeatCount="indefinite"
            />
            <stop offset="0%" stop-color="#0ff" />
            <stop offset="100%" stop-color="#0ff0" />
          </radialGradient>
          <radialGradient
            id="Gradient3"
            cx="50%"
            cy="50%"
            fx="50%"
            fy="50%"
            r=".5"
          >
            <animate
              attributeName="fx"
              dur="21.5s"
              values="0%;3%;0%"
              repeatCount="indefinite"
            />
            <stop offset="0%" stop-color="#f0f" />
            <stop offset="100%" stop-color="#f0f0" />
          </radialGradient>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
          <animate
            attributeName="x"
            dur="20s"
            values="25%;0%;25%"
            repeatCount="indefinite"
          />
          <animate
            attributeName="y"
            dur="21s"
            values="0%;25%;0%"
            repeatCount="indefinite"
          />
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            dur="17s"
            repeatCount="indefinite"
          />
        </rect>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
          <animate
            attributeName="x"
            dur="23s"
            values="-25%;0%;-25%"
            repeatCount="indefinite"
          />
          <animate
            attributeName="y"
            dur="24s"
            values="0%;50%;0%"
            repeatCount="indefinite"
          />
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            dur="18s"
            repeatCount="indefinite"
          />
        </rect>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
          <animate
            attributeName="x"
            dur="25s"
            values="0%;25%;0%"
            repeatCount="indefinite"
          />
          <animate
            attributeName="y"
            dur="26s"
            values="0%;25%;0%"
            repeatCount="indefinite"
          />
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 50 50"
            to="0 50 50"
            dur="19s"
            repeatCount="indefinite"
          />
        </rect>
      </svg>
      <div class="bg"></div>
      <div class="pan-share-code-logo">
        <img src="@/assets/imgs/logo.svg" alt="" />{{ title }}
      </div>
      <div class="pan-share-code-content">
        <div class="pan-share-code-wrapper">
          <el-card
            :header="shareCodeHeader"
            shadow="always"
            class="pan-share-code-card"
          >
            <el-form
              class="pan-share-code-form"
              label-width="80px"
              :inline="true"
              :rules="shareCodeFormRules"
              ref="shareCodeForm"
              :model="shareCodeForm"
              status-icon
              @submit.native.prevent
            >
              <el-form-item label="提取码" prop="shareCode">
                <el-input
                  type="text"
                  ref="shareCode"
                  @keyup.enter.native="doCheckShareCode"
                  v-model="shareCodeForm.shareCode"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="loading"
                  @click="doCheckShareCode"
                  >确 定</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="保存到我的R盘"
      :visible.sync="treeDialogVisible"
      @open="loadTreeData"
      @closed="resetTreeData"
      width="30%"
      :append-to-body="true"
      :modal-append-to-body="false"
      :center="true"
    >
      <div class="tree-content">
        <el-tree
          :data="treeData"
          class="tree"
          empty-text="暂无文件夹数据"
          default-expand-all
          highlight-current
          check-on-click-node
          :expand-on-click-node="false"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <i
              class="fa fa-folder-o"
              style="margin-right: 15px; font-size: 20px; cursor: pointer"
            />
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treeDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="doChoseTreeNodeCallBack"
          :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import panUtil from '@/utils/common'
import userService from '@/api/user'
import fileService from '@/api/file'
import PanUserInfo from '@/components/user-info/index.vue'
import {
  clearToken,
  setToken,
  setShareToken,
  getShareToken,
  getToken,
  clearShareToken,
} from '../../utils/cookie'
import shareService from '../../api/share'
import { encrypt } from '@/utils/jsencrypt'

export default {
  name: 'Share',
  components: { PanUserInfo },
  props: {},
  data() {
    const checkUsername = (rule, value, callback) => {
        if (!panUtil.checkUsername(value)) {
          callback('请输入6-16位只包含数字和字母的用户名')
          return
        }
        callback()
      },
      checkPassword = (rule, value, callback) => {
        if (!panUtil.checkPassword(value)) {
          callback('请输入8-16位的密码')
          return
        }
        callback()
      }
    return {
      title: import.meta.env.VITE_TITLE,
      loginDialogVisible: false,
      loginRules: {
        username: [{ validator: checkUsername, trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      shareCodeFormRules: {
        shareCode: [
          { required: true, message: '请输入提取码', trigger: 'blur' },
        ],
      },
      loginForm: {
        username: '',
        password: '',
      },
      loading: false,
      username: '',
      loginFlag: false,
      shareCodeDialogVisible: true,
      shareCodeForm: {
        shareCode: '',
      },
      shareCodeHeader: '',
      shareCancelFlag: false,
      tableData: [],
      tableHeight: window.innerHeight - 300,
      multipleSelection: [],
      pageLoading: true,
      shareDate: '',
      shareExpireDate: '',
      breadCrumbs: [
        {
          id: '-1',
          name: '全部文件',
        },
      ],
      treeData: [],
      treeDialogVisible: false,
      item: undefined,
      checkAll: false,
    }
  },
  methods: {
    getFileFontElement(type) {
      return panUtil.getFileFontElement2(type)
    },
    clearSelect() {
      this.multipleSelection = []
    },
    selectItem(item) {
      let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
      const index = selectList.findIndex((val) => {
        return val.shareId === item.shareId
      })
      if (index >= 0) {
        selectList.splice(index, 1)
      } else {
        selectList.push(item)
      }
      this.multipleSelection = selectList
    },
    getListIndex(item) {
      return this.multipleSelection.findIndex(function (val) {
        return val.shareId === item.shareId
      })
    },
    loadShareInfo() {
      let _this = this
      shareService.getShareDetail((res) => {
        if (res.status === 0) {
          _this.refreshShareInfo(res.data)
        } else if (res.status === 4) {
          _this.openShareCodePage()
        } else {
          _this.openShareExpirePage()
        }
      })
    },
    refreshShareInfo(data) {
      let username = data.shareUserInfoVO.username,
        shareName = data.shareName
      this.shareCodeHeader = username + '的分享：' + shareName
      this.shareDate = data.createTime
      if (data.shareDay === 0) {
        this.shareExpireDate = '永久有效'
      } else {
        this.shareExpireDate = data.shareEndTime
      }
      this.tableData = data.rPanUserFileVOList
    },
    openShareCodePage() {
      let _this = this
      shareService.getSimpleShareDetail(
        {
          shareId: _this.getShareId(),
        },
        (res) => {
          if (res.status === 0) {
            this.shareCodeDialogVisible = true
            _this.shareCodeHeader =
              res.data.shareUserInfoVO.username +
              '的分享：' +
              res.data.shareName
          } else {
            _this.shareCodeDialogVisible = false
            _this.openShareExpirePage()
          }
        }
      )
    },
    openShareExpirePage() {
      this.shareCancelFlag = true
    },
    loadUserInfo() {
      let _this = this
      userService.infoWithoutPageJump((res) => {
        if (res.status === 0) {
          _this.username = res.data.username
          _this.loginFlag = true
        } else {
          _this.username = ''
          _this.loginFlag = false
        }
      })
    },
    login() {
      this.loginDialogVisible = true
    },
    exit() {
      let _this = this
      _this
        .$confirm('确定要退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          userService.exit(
            () => {
              clearToken()
              _this.loginFlag = false
              _this.username = ''
            },
            (res) => {
              _this.$message.error(res.message)
            }
          )
        })
    },
    focusInput(ref) {
      this.$refs[ref].focus()
    },
    resetForm(ref) {
      this.$refs[ref].resetFields()
    },
    doLogin() {
      let _this = this
      _this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _this.loading = true
          userService.login(
            {
              username: _this.loginForm.username,
              password: encrypt(_this.loginForm.password),
            },
            (res) => {
              _this.loading = false
              setToken(res.data)
              _this.loginDialogVisible = false
              _this.loadUserInfo()
            },
            (res) => {
              _this.loading = false
              _this.$message.error(res.message)
            }
          )
        }
      })
    },
    goHome() {
      // window.location.href = '/'
      this.$router.replace('/')
    },
    doCheckShareCode() {
      let _this = this
      _this.$refs.shareCodeForm.validate((valid) => {
        if (valid) {
          _this.loading = true
          shareService.checkShareCode(
            {
              shareId: _this.getShareId(),
              shareCode: _this.shareCodeForm.shareCode,
            },
            (res) => {
              if (res.status === 0) {
                _this.loading = false
                setShareToken(res.data)
                _this.shareCodeDialogVisible = false
                _this.loadShareInfo()
              } else {
                _this.loading = false
                _this.$message.error(res.message)
              }
            }
          )
        }
      })
    },
    handleSelectionChange(multipleSelection) {
      this.multipleSelection = multipleSelection
    },
    showOperation(row, column, cell, event) {
      panUtil.showOperation(cell)
    },
    hiddenOperation(row, column, cell, event) {
      panUtil.hiddenOperation(cell)
    },
    clickFilename(row) {
      let _this = this
      if (row.folderFlag === 1) {
        _this.goInFolder(row)
      }
    },
    goInFolder(row) {
      this.breadCrumbs.push({
        id: row.fileId,
        name: row.filename,
      })
      this.reloadTableData(row.fileId)
    },
    reloadTableData(parentId) {
      let _this = this
      shareService.getShareFiles(
        {
          parentId: parentId,
        },
        (res) => {
          if (res.status === 0) {
            _this.tableData = res.data
          } else {
            window.location.reload()
          }
        }
      )
    },
    goToThis(id) {
      let _this = this
      if (id === '-1') {
        _this.breadCrumbs = [
          {
            id: '-1',
            name: '全部文件',
          },
        ]
        _this.loadShareInfo()
      } else {
        let newBreadCrumbs = new Array()
        _this.breadCrumbs.some((item) => {
          newBreadCrumbs.push(item)
          if (item.id === id) {
            return true
          }
        })
        _this.breadCrumbs = newBreadCrumbs
        _this.reloadTableData(id)
      }
    },
    getShareId() {
      return this.$route.params.shareId
    },
    downloadFile() {
      let _this = this
      if (!_this.multipleSelection || _this.multipleSelection.length === 0) {
        _this.$message.error('请选择要下载的文件')
        return
      }
      for (
        let i = 0, iLength = _this.multipleSelection.length;
        i < iLength;
        i++
      ) {
        if (_this.multipleSelection[i].folderFlag === 1) {
          _this.$message.error('文件夹暂不支持下载')
          return
        }
      }
      _this.doDownLoads(_this.multipleSelection)
    },
    doDownLoads(items, i) {
      let _this = this
      if (!i) {
        i = 0
      }
      if (items.length === i) {
        return
      }
      setTimeout(function () {
        _this.doDownload(items[i])
        i++
        _this.doDownLoads(items, i)
      }, 500)
    },
    doDownload(item) {
      let _this = this
      if (item.folderFlag === 1) {
        _this.$message.error('文件夹暂不支持下载')
        return
      }
      userService.infoWithoutPageJump((res) => {
        if (res.status === 0) {
          shareService.getSimpleShareDetail(
            {
              shareId: _this.getShareId(),
            },
            (res) => {
              if (res.status === 0) {
                let url =
                    panUtil.getUrlPrefix() +
                    '/share/file/download?fileId=' +
                    item.fileId +
                    '&shareToken=' +
                    getShareToken() +
                    '&authorization=' +
                    getToken(),
                  filename = item.filename,
                  link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', filename)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
              } else {
                window.location.reload()
              }
            }
          )
        } else {
          _this.loadUserInfo()
          _this.login()
        }
      })
    },
    resetTreeData() {
      this.treeData = new Array()
      this.item = undefined
    },
    loadTreeData() {
      let _this = this
      fileService.getFolderTree(
        (res) => {
          _this.treeData = res.data
        },
        (res) => {
          _this.$message.error(res.message)
        }
      )
    },
    doChoseTreeNodeCallBack() {
      this.loading = true
      let checkNode = this.$refs.tree.getCurrentNode()
      if (!checkNode) {
        this.$message.error('请选择文件夹')
        this.loading = false
        return
      }
      this.doSaveFiles(checkNode.id)
    },
    saveFiles(item) {
      let _this = this
      if (item) {
        _this.item = item
      } else if (
        !_this.multipleSelection ||
        _this.multipleSelection.length === 0
      ) {
        _this.$message.error('请选择要保存的文件')
        return
      }
      userService.infoWithoutPageJump((res) => {
        if (res.status === 0) {
          _this.treeDialogVisible = true
        } else {
          _this.login()
        }
      })
    },
    doSaveFiles(targetParentId) {
      let _this = this
      let fileIds = ''
      if (_this.item) {
        fileIds = _this.item.fileId
      } else {
        let fileIdArr = new Array()
        _this.multipleSelection.forEach((item) => {
          fileIdArr.push(item.fileId)
        })
        fileIds = fileIdArr.join('__,__')
      }
      shareService.saveShareFiles(
        {
          fileIds: fileIds,
          targetParentId: targetParentId,
        },
        (res) => {
          if (res.status === 0) {
            _this.$message.success('保存成功')
            _this.treeDialogVisible = false
          } else if (res.status === 10) {
            _this.treeDialogVisible = false
            _this.loadUserInfo()
            _this.login()
          } else {
            _this.$message.error(res.message)
          }
          _this.loading = false
        }
      )
    },
  },
  computed: {},
  mounted() {
    clearShareToken()
    this.loadShareInfo()
    this.loadUserInfo()
    this.pageLoading = false
  },
  watch: {
    checkAll: {
      handler(val) {
        if (val) {
          this.multipleSelection = JSON.parse(JSON.stringify(this.tableData))
        } else {
          this.clearSelect()
        }
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.pan-share-content {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 1103px;
  background: #f7f7f7;
  transition: background 1s ease;
  font: 12px/1.5 'Microsoft YaHei', arial, SimSun, '宋体';
  width: 100%;
  height: 100%;

  .pan-share-header-content {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 41;
    position: fixed;

    .pan-share-header-content-wrapper {
      height: 62px;
      line-height: 62px;
      position: relative;
      background: #fff;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
      -webkit-transition: background 1s ease;
      -moz-transition: background 1s ease;
      -o-transition: background 1s ease;
      transition: background 1s ease;

      .pan-share-header-title-font-content {
        display: inline-block;
        position: absolute;
        left: 40px;

        .pan-share-header-title-font {
          font-size: 22px;
          font-weight: bolder;
          cursor: pointer;
          // color: #f56c6c;
          display: flex;
          align-items: center;
          img {
            display: block;
            height: 24px;
            margin-right: 10px;
          }
        }
      }

      .pan-share-header-user-info-content {
        display: inline-block;
        position: absolute;
        right: 100px;

        .pan-share-username {
          margin-right: 20px;
        }
      }

      .pan-share-header-button-content {
        display: inline-block;
        position: absolute;
        right: 100px;

        .pan-share-login-button {
          margin-right: 20px;
        }
      }
    }
  }

  .pan-share-list-content {
    width: 100%;
    margin-top: 62px;
    padding: 20px;
    box-sizing: border-box;
    height: calc(100vh - 62px);

    .pan-share-list-wrapper {
      width: 80%;
      margin: 0 auto;

      .pan-share-list-card {
        width: 100%;
        border-radius: 10px;
        height: calc(100vh - 62px - 40px);
        .pan-share-list-card-header {
          padding: 10px 20px 0 0;
          display: flex;
          justify-content: space-between;
          .pan-share-list-card-button-group {
            display: inline-block;

            /* float: right; */
            margin-right: 20px;
          }

          .pan-share-list-card-header-share-info-content {
            display: inline-block;

            .pan-share-list-card-header-share-info {
              color: #67c23a;
              font-size: 18px;
              margin-right: 10px;
            }

            .pan-share-list-card-header-time {
              margin-top: 10px;

              .pan-share-list-card-header-create-date {
                color: #909399;
                margin-right: 15px;
                i {
                  margin-right: 5px;
                }
              }

              .pan-share-list-card-header-expire-date {
                color: #f56c6c;
                i {
                  margin-right: 5px;
                }
              }
            }
          }
        }

        .pan-share-list-card-error-message {
          width: 100%;
          height: 300px;
          padding-top: 50px;
          text-align: center;
          color: #f56c6c;
          font-size: 30px;
        }

        .pan-share-list-card-operate-content {
          height: 30px;
          line-height: 30px;
          padding: 0 30px 0 0;
        }
      }
    }

    :deep(.el-card__body) {
      flex: 1;
    }
  }
}
.pan-share-code-logo {
  font-size: 30px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
  align-items: center;
  font-weight: bolder;
  padding-top: 5%;
  margin: 0 auto 30px;
  pointer-events: none;
  img {
    display: block;
    height: 30px;
    margin-right: 10px;
  }
}
.pan-share-code-content {
  width: 100%;
  height: 260px;

  .pan-share-code-wrapper {
    height: 260px;
    width: 450px;
    margin: 0 auto;
    position: relative;

    .pan-share-code-card {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      :deep(.el-card__body) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      // .pan-share-code-form {
      //   // position: absolute;
      //   // top: 40%;
      // }
    }
  }
}

span {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.breadcrumb-item-a {
  cursor: pointer !important;
  color: #409eff !important;
}

.tree-content {
  height: 400px;
}

.tree-content .tree {
  height: 100%;
  overflow: auto;
}

.file-operation-content {
  display: none;
  position: absolute;
  right: 100px;
  top: 8px;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  // box-shadow: 0 0 10px 100px #fff inset;
  // background-color: rgba($color: #fff, $alpha: 0.3);
}
.svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.file-list1 {
  display: flex;

  padding: 0 20px 0;

  &.table {
    flex-direction: column;
  }
  .item {
    width: 100%;
  }
  .file-item {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    &.sortable-ghost {
      display: none;
    }
    .check {
      margin-right: 20px;
    }
    .icon {
      width: 30px;
      text-align: center;
      margin-bottom: 0px;
      font-size: 20px;
      user-select: none;

      i {
        font-size: 20px;
        margin-right: 15px;
      }
      .svgicon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        // overflow: hidden;
        margin-right: 15px;
      }
    }
    .name {
      flex: 1;
      user-select: none;
    }
    .action {
      width: 100px;
    }
    .size {
      width: 100px;
    }
    .time {
      width: 200px;
      text-align: left;
      user-select: none;
      color: #000;
    }
  }

  &.list {
    .file-item {
      justify-content: flex-start;
      border-color: #fff;
      &.on {
        border-color: #eee;
      }
    }
  }
}
:deep(.is-horizontal) {
  display: none;
}
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
.file-list {
  display: flex;
  padding: 0 20px 20px;

  &.table {
    flex-direction: column;
  }
  .file-item {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    .el-image {
      display: inherit;
      overflow: visible;
      :deep(img) {
        border: 1px solid #eee;
      }
    }
    &.sortable-ghost {
      display: none;
    }
    &:hover {
      background-color: #f7f7f7;
      .action {
        opacity: 1 !important;
      }
    }
    .check {
      margin-right: 20px;
      pointer-events: none;
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        left: 0;
        top: 0;
      }
    }
    .icon {
      width: 30px;
      text-align: center;
      margin-bottom: 0px;
      margin-right: 10px;
      font-size: 20px;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      i {
        font-size: 20px;
        margin-right: 15px;
      }

      .svgicon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        // overflow: hidden;
        // margin-right: 15px;
      }
    }
    .name {
      flex: 1;
      user-select: none;
    }
    .action {
      width: 100px;
      opacity: 0;
      transition: all 0.4s;
    }
    .size {
      width: 100px;
    }
    .time {
      width: 200px;
      text-align: left;
      user-select: none;
      color: #000;
    }
  }
}
.empty {
  height: calc(100vh - 62px - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ccc;
  .icon {
    margin: 0 auto 20px;
    .iconfont {
      font-size: 60px;
    }
  }
  .title {
    font-size: 18px;
  }
}
</style>
